{% extends "背景板.html" %}
{% block sidebar %}
<li><a href="{{url_for('products.products')}}">商品管理</a></li>
<li><a href="{{url_for('member.members')}}">会员管理</a></li>
<li><a href="{{url_for('sale.saleorders')}}">销售管理</a></li>
<li><a href="{{url_for('purchase_orders.purchase_orders')}}">采购管理</a></li>
<li><a href="{{url_for('sale.display_analysis')}}">统计分析</a></li>
{% endblock %}
{% block main %}
<h1>销售数据分析</h1>
<div id="sales-count-chart"></div>
<div id="sales-amount-chart"></div>
<script>
    // 获取销售数据
    async function fetchSalesData() {
        const response = await fetch('/sale/sales_orders_analysis');
        const data = await response.json();
        return data.map(item => ({
            date: item.date,
            count: item.count,
            total_amount: item.total_amount
        }));
    }

    // 渲染按日期统计销售单数的图表
    function renderSalesCountChart(data) {
        const chart = new Highcharts.Chart({
            chart: {
                renderTo: 'sales-count-chart',
                type: 'line'
            },
            title: {
                text: '按日期统计销售单数'
            },
            xAxis: {
                categories: data.map(item => item.date)
            },
            yAxis: {
                title: {
                    text: '销售单数'
                }
            },
            series: [{
                name: '销售单数',
                data: data.map(item => item.count)
            }]
        });
    }

    // 渲染按日期统计总销售金额的图表
    function renderSalesAmountChart(data) {
        const chart = new Highcharts.Chart({
            chart: {
                renderTo: 'sales-amount-chart',
                type: 'line'
            },
            title: {
                text: '按日期统计总销售金额'
            },
            xAxis: {
                categories: data.map(item => item.date)
            },
            yAxis: {
                title: {
                    text: '销售总金额'
                }
            },
            series: [{
                name: '销售总金额',
                data: data.map(item => item.total_amount)
            }]
        });
    }

    // 页面加载完成后执行以下代码
    window.addEventListener('load', async () => {
        // 获取销售数据
        const data = await fetchSalesData();
        // 渲染按日期统计销售单数的图表
        renderSalesCountChart(data);
        // 渲染按日期统计总销售金额的图表
        renderSalesAmountChart(data);
    });
</script>
{% endblock %}